<template>
  <div id="home">
    <!-- 顶部导航栏 -->
    <NavBar class="home_nav_bar">
      <template #center>购物街</template>
    </NavBar>
    <TabBarControl
      ref="tabControl"
      :titles="titles"
      @toggleTab="getType"
      v-show="isShowFadeTab"
      class="fade_tab_control"
    />
    <!-- 利用better-scroll处理滚动 -->
    <Scroll
      class="wrapper"
      ref="scroll"
      :probeType="3"
      :pullUpLoad="true"
      :listenScroll="true"
      @pullingUp="loadMore"
      @scroll="contentScroll"
    >
      <!-- 轮播图 -->
      <HomeSwiper :banner="banner" />
      <!-- 推荐区域 -->
      <HomeRecommend :recommend="recommend" />
      <!-- 流行区域 -->
      <HomeFeature />
      <!-- tab栏切换区域 -->
      <TabBarControl ref="tabControl" :titles="titles" @toggleTab="getType" />
      <!-- 商品列表 -->
      <GoodsList :goodsList="showGoodsList" />
    </Scroll>
    <BackTop v-show="showBackTop" @backTop="backTop">
      <img src="~@/assets/images/common/top.png" alt="" />
    </BackTop>
  </div>
</template>

<script>
import { POP, NEW, SELL } from '@/utils/const'

import NavBar from '@/components/common/NavBar'
import HomeSwiper from './children/HomeSwiper'
import HomeRecommend from './children/HomeRecommend'
import HomeFeature from './children/HomeFeature'
import TabBarControl from '@/components/content/TabBarControl'
import GoodsList from '@/components/content/GoodsList'
import Scroll from '@/components/common/Scroll'
import BackTop from '@/components/content/BackTop'

export default {
  name: 'Home',
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    HomeFeature,
    TabBarControl,
    GoodsList,
    Scroll,
    BackTop
  },
  created () {
    this.getHomeMultidata()
    this.getHomeData(POP)
    this.getHomeData(NEW)
    this.getHomeData(SELL)
  },
  updated () {
    this.tabControlOffsetTop = this.$refs.tabControl.$el.offsetTop
  },
  activated () {
    this.$refs.scroll.scrollTo(0, this.saveY, 100)
  },
  deactivated () {
    this.saveY = this.$refs.scroll.scroll.y
  },
  computed: {
    showGoodsList () {
      return this.goodsList[this.currentType].list
    }
  },
  data () {
    return {
      banner: [], // 轮播图数据
      recommend: [], // 推荐区域数据
      titles: ['流行', '新款', '精选'], // tab栏标题数据
      currentType: POP,
      goodsList: {
        pop: { list: [], page: 0 },
        new: { list: [], page: 0 },
        sell: { list: [], page: 0 }
      },
      showBackTop: false,
      tabControlOffsetTop: 500, // TabBarControl的offsetTop的值
      isShowFadeTab: false, // TabBarControl是否吸顶
      saveY: 0
    }
  },
  methods: {
    async getHomeMultidata () {
      const res = await this.$api.getHomeMultidata()

      this.banner = res.data.banner.list
      this.recommend = res.data.recommend.list
    },
    async getHomeData (type) {
      const page = this.goodsList[type].page + 1
      const res = await this.$api.getHomeData(type, page)

      this.goodsList[type].list.push(...res.data.list)
      this.goodsList[type].page += 1
    },
    getType (index) {
      switch (index) {
        case 0:
          this.currentType = POP
          break
        case 1:
          this.currentType = NEW
          break
        case 2:
          this.currentType = SELL
          break
        default:
          break
      }
    },
    loadMore () {
      this.getHomeData(this.currentType)

      // 告诉 BetterScroll 准备好下一次的 pullingUp 函数
      this.$refs.scroll.finishPullUp()
    },
    contentScroll (pos) {
      // 控制回到顶部按钮的显示与隐藏
      this.showBackTop = -pos.y > 1000

      this.isShowFadeTab = -pos.y > this.tabControlOffsetTop
    },
    backTop () {
      this.$refs.scroll.scrollTo(0, 0, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
#home {
  height: 100vh;
  position: relative;

  .home_nav_bar {
    background-color: $--color-tint;
    color: #fff;
  }

  .fade_tab_control {
    position: relative;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #fff;
  }

  .wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
    overflow: hidden;
  }
}
</style>
